<template>
    <el-table :data="pagedData" style="width: 100%" :empty-text="'暂无轨迹信息'">
        <el-table-column prop="location" label="地址" />
        <el-table-column prop="source" label="来源" />
        <el-table-column prop="coordinate" label="坐标" />
        <el-table-column prop="appearDays" label="出现天数" />
        <el-table-column prop="lastAppearTime" label="最后出现时间" />
        <el-table-column prop="activePeriod" label="活跃时段" />
    </el-table>
    <div class="pagination">
        <el-pagination
            v-if="data.length > pageSize"
            layout="prev, pager, next, jumper, total"
            :total="data.length"
            :page-size="pageSize"
            v-model:current-page="currentPage"
            background
        />
    </div>
</template>

<script setup>
import { ref, watch, computed } from "vue";

const data = ref([]);
const currentPage = ref(1);

const props = defineProps(["data"]);
watch(() => props.data, info => {
    data.value = info || [];
}, { immediate: true });

const pageSize = ref(5);

const pagedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    return data.value.slice(start, start + pageSize.value);
});
</script>

<style>
.pagination {
    display: flex;
    justify-content: center;
    padding: 10px;
}
</style>